<template>
	<view class="invite_page">
		<view class="canvas_wrap">
			<image src="/static/public/register.png" class="bg" mode="aspectFit"></image>
			<view class="con">
				<view class="codeImg">
					<image :src="url" class="code"></image>
				</view>
				<view class="text">分享专属二维码，享受推荐奖</view>
				<view class="btn">
					<button class="btnText" @click="saveImageToPhotosAlbum">保存图片到相册</button>
				</view>
			</view>
			<canvas canvas-id='myCanvas' class="share" />
		</view>
	</view>
</template>

<script>
	import {
			mapState
		} from 'vuex';
		export default {
			data() {
				return {
					height: "",
					url: "",
					empClass: null,
					showStatus: 1,
					indexData: "",
					time: "",
					teamAchievement: null,
					teamAchievementTitle: "",
					delBtnWidth: 160,
					isScroll: true,
					windowHeight: 0,
					data: [],
					newData: [],
					addtellData:{
						agentName: null,
						phoneNumber: null,
					},
					showPop: false,
					agentBonusAmount: {},
					name: "",
					options: [{
						id: '0',
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}, {
						id: '1',
						text: '查看',
						style: {
							backgroundColor: '#007aff'
						}
					}]
				}
			},
			computed: {
				...mapState(["userInfo"]),
			},
			onShow() {
				this.getList();
			},
			methods: {
				//保存二维码到相册
				saveImageToPhotosAlbum() {
					uni.showToast({
						title: '图片保存中',
						icon: 'none'
					})
					const ctx = uni.createCanvasContext('myCanvas')
					uni.getImageInfo({
						src: this.url,
						success(res) {
							ctx.drawImage("/static/public/canvas.png", 0, 0, uni.getSystemInfoSync().windowWidth, 667)
							ctx.drawImage(res.path, (uni.getSystemInfoSync().windowWidth - 220) / 2, 320, 220, 220)
							ctx.draw(true, setTimeout(function() {
								uni.canvasToTempFilePath({
									canvasId: 'myCanvas',
									success: (res) => {
										console.log(res);
										uni.saveImageToPhotosAlbum({
											filePath: res.tempFilePath,
											success: () => {
												uni.showToast({
													title: '保存成功',
													icon: 'none'
												})
											},
											fail: () => {
												console.log(2222)
												uni.showToast({
													title: '保存失败',
													icon: 'none'
												})
											}
										})
									}
								})
							}, 100))
						},
						fail() {
							uni.showToast({
								title: '图片加载失败',
								icon: 'none'
							})
						}
					})
				},
				//获取二维码
				getList() {
					this.$api.getParRWM().then(res => {
						this.url = res.data.data;
					})
				},
			}
		}
</script>

<style scoped lang="scss">
	.canvas_wrap {
		width: 100%;
		height: calc(100vh - var(--window-top) - var(--window-bottom));
		background: #3b9df8;
		overflow: hidden;
	
		.bg {
			width: 100%;
			height: 50%;
		}
	
		.con {
			width: 90%;
			height: 50%;
			background-color: white;
			border-radius: 15px;
			margin: -5% 5% 0;
			padding-top: 40rpx;
			padding-bottom: 60rpx;
			display: flex;
			flex-flow: column;
			z-index: 2;
			position: relative;
			justify-content: space-around;
		}
	
		.codeImg {
			width: 320rpx;
			height: 320rpx;
			display: flex;
			justify-content: center;
			margin: 0 auto;
		}
	
		.code {
			width: 100%;
			height: 100%;
		}
	
		.text {
			width: 100%;
			text-align: center;
			font-size: 14px;
			color: #333333;
			margin: 10rpx 0;
		}
	
		.btn {
			width: 100%;
		}
	
		.btnText {
			width: 74%;
			margin: 0 13%;
			background-color: #52AAF8;
			color: white;
			font-size: 18px;
			text-align: center;
			border-radius: 25px;
			height: 90rpx;
			line-height: 90rpx;
		}
	
		.share {
			width: 100%;
			height: 100vh;
		}
	}
</style>
